<template>
  <el-dialog
      :model-value="modelValue"
      :title="title"
      :width="width"
      append-to-body
      draggable
      :close-on-click-modal="closeOnClickModal"
      :before-close="close"
  >
    <slot></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button :icon="closeButtonIcon" v-if="closeTextVisible" @click="close"
                   :style="{width:`${closeButtonWidth}px`}">{{ closeText }}</el-button>
        <el-button :icon="submitButtonIcon" v-if="submitTextVisible" type="primary" @click="submit"
                   :style="{width:`${submitButtonWidth}px`}">{{
            submitText
          }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
interface Props {
  modelValue: boolean,//双向绑定，控制弹框显示或隐藏
  title?: string,//弹框左上角title
  width?: string,//弹框的宽度
  closeText?: string,//自定义弹框下方左侧按钮
  submitText?: string,//自定义弹框下方右侧按钮
  closeTextVisible?: boolean,//是否显示弹框下方左侧按钮
  submitTextVisible?: boolean,//是否显示弹框下方右侧按钮
  closeButtonIcon?: string,//弹框下方左侧按钮图标
  submitButtonIcon?: string,//弹框下方右侧按钮图标
  closeButtonWidth?: string | number,//自定义弹框下方左侧按钮宽度
  submitButtonWidth?: string | number,//自定义弹框下方右侧按钮宽度
  closeOnClickModal?: boolean,//点击弹框外是否关闭弹框
}

const emits = defineEmits(['update:modelValue', 'submitForm', 'clearForm'])

let props = withDefaults(defineProps<Props>(), {
  title: '标题',
  width: '50%',
  closeText: '取消',
  submitText: '确定',
  closeTextVisible: true,
  submitTextVisible: true,
  closeOnClickModal: false,
  closeButtonIcon: '',
  submitButtonIcon: '',
  closeButtonWidth: '',
  submitButtonWidth: '',
})
let {
  modelValue,
  title,
  width,
  closeText,
  submitText,
  closeTextVisible,
  submitTextVisible,
  closeButtonIcon,
  submitButtonIcon,
  closeButtonWidth,
  submitButtonWidth,
  closeOnClickModal,
} = toRefs(props)

const close = () => {
  emits('clearForm')
  emits('update:modelValue', false)
}
const submit = () => {
  emits('submitForm')
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

:global(.el-dialog__header) {
  border-bottom: 1px solid #e8eaec;
}
</style>
